<template>
    <div id="detail-algorithm">
        <el-dialog
            :title="itemTitle"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
        <div style="margin-bottom: 10px;font-weight: bolder;">{{ $t('mGEhBiAZdx2tn5f3Xtkl') }}<span style="color: #b3b8b1; font-weight: normal;">{{ $t('6OzAgq16odyPijiwbYw14') }}</span></div>
        <el-table :data="itemArr" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-table-column type="index" :label="$t('wmd4Ixon01TmSHk82nKh')" width="55" align="center" />
                <el-table-column prop="v_DeviceCode" :label="$t('bWyVzSlq6LlaWcUgAlePn')" align="center" />
                <el-table-column prop="v_ModelName" :label="$t('sttJdZkZo_3Dwos4Idwy')" align="center" min-width="200" />
                <el-table-column prop="n_ModelVersion" :label="$t('dZme86K22jfZvK7mp2ex9')" align="center" />
                <el-table-column prop="n_AvgSpanTime" :label="$t('8VpLcSaXnPmTmExBdBc3Q')" align="center" />
                <el-table-column prop="n_MinSpanTime" :label="$t('jwREzRrbwBml_5202W28')" align="center" />
                <el-table-column prop="n_MaxSpanTime" :label="$t('lgZbk2kG1OwumjevMtn')" align="center" />
            </el-table>

            <template #footer>
                <el-button @click="handleClose">{{ $t('ml5D22SPhF8B3thSuLopc') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, computed } from 'vue'
import { GetRecentMonthAlgorithmLogStatistics } from '/@/api/its/algorithm'

export default defineComponent( {
    name: 'call-detail-algorithm',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object,
            default: null,
        }
    },
    setup(props,ctx){

        const loading = ref(false)
        const itemArr:any = ref([])

        const itemTitle = computed(() => {
            return  window.$t('rXtVe1bIgbzePg9vUeivm')+ ":" + props.item.v_Name + '-' + window.$t('yOZbJtGbGTcfOqUMpC')
        })
        
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        //获取数据
        const getList = async () => {
            try {
                loading.value = true
                let res = await GetRecentMonthAlgorithmLogStatistics({algorithId: props.item.n_Id})
                if (res && res.data) {
                    itemArr.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }finally {
                loading.value = false
            }
        }

        onMounted(async () => {
            await getList()
        })

        return {
            handleClose,
            loading,
            itemTitle,
            itemArr
        }
    },
} )
</script>
<style scoped lang="scss">
#detail-algorithm{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
    .bind-item {
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }
}
</style>